<template>
  <div class="List-box">
    <div class="box" v-for="(item, index) in list" :key="index">
      <div class="img-box">
        <img :src="item.picture" alt="" />
      </div>
      <div class="right">
        <div class="name">{{ item.name }} / {{ item.unit }}</div>
        <div class="passage">
          <div class="left">
            <p>爆爆团价</p>
            <div class="price">￥{{ item.min_price }}</div>
            <del>￥{{ item.min_price + 3 }}</del>
          </div>
          <div class="you">
            <div class="qiang">马上抢</div>
            <div class="shou">{{item.month_saled_content}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { tuan_list } from "../api/index.js";
export default {
  mounted() {
    tuan_list({ status: 0 }).then((res) => {
      console.log(res.data.list);
    });
  },
  data() {
    return {
      list: [
        {
          id: 1890747121,
          name: "乾县酱辣子夹馍",
          min_price: 5.9,
          unit: "约250克",
          picture:
            "http://p0.meituan.net/wmproduct/b1fa0bfb0cb2e7b29bffbc7139d85493233021.jpg",
          month_saled: 400,
          month_saled_content: "月售400",
          tag: "121131845",
          promotion_info: "8.43折",
          status: 0,
        },
        {
          id: 6403217214,
          name: "肉夹馍(肥瘦)",
          min_price: 10,
          unit: "1人份",
          picture:
            "http://p0.meituan.net/xianfu/da8ccec27667956e3cbde0c9dd7c57a0432227.jpg",
          month_saled: 800,
          month_saled_content: "月售800",
          tag: "331125047",
          promotion_info: "",
          status: 0,
        },
        {
          id: 1642188423,
          name: "碳烤照烧鸡饭",
          min_price: 25,
          unit: "1人份",
          picture:
            "http://p0.meituan.net/wmproduct/f05a268255778d9a237d193bd1387c14101832.jpg",
          month_saled: 39,
          month_saled_content: "月售39",
          tag: "108728803",
          promotion_info: "",
          status: 0,
        },
        {
          id: 1642347596,
          name: "台式卤肉饭",
          min_price: 25,
          unit: "1人份",
          picture:
            "http://p0.meituan.net/wmproduct/3c9b72e3b1df9adcf1687bb9ce689a07102731.jpg",
          month_saled: 31,
          month_saled_content: "月售31",
          tag: "108728803",
          promotion_info: "",
          status: 0,
        },
        {
          id: 7538736403,
          name: "虾仁蒸蛋",
          min_price: 6,
          unit: "1人份",
          picture:
            "http://p0.meituan.net/wmproduct/58e3f6f7465d949864f8f0fadc521c9362535.jpg",
          month_saled: 25,
          month_saled_content: "月售25",
          tag: "108728801",
          promotion_info: "",
          status: 0,
        },
        {
          id: 7570195010,
          name: "安格斯牛肉芝士堡",
          min_price: 15,
          unit: "1人份",
          picture:
            "http://p0.meituan.net/wmproduct/7662fd48a37ac1309f6e78f2e97dc28489965.jpg",
          month_saled: 77,
          month_saled_content: "月售77",
          tag: "108728801",
          promotion_info: "",
          status: 0,
        },
        {
          id: 1642662635,
          name: "至珍鲜虾堡",
          min_price: 12,
          unit: "1个",
          picture:
            "http://p0.meituan.net/wmproduct/eb063f9c0b12f07e1046a7642ae4a703324084.jpg",
          month_saled: 300,
          month_saled_content: "月售300",
          tag: "108728801",
          promotion_info: "",
          status: 0,
        },
        {
          id: 7071404757,
          name: "拿铁",
          min_price: 12,
          unit: "1杯",
          picture:
            "http://p0.meituan.net/wmproduct/0fddfb07c4536dd4c0a3610778c5bf9370888.jpg",
          month_saled: 11,
          month_saled_content: "月售11",
          tag: "366457032",
          promotion_info: "",
          status: 0,
        },
        {
          id: 7071404758,
          name: "经典美式咖啡",
          min_price: 12,
          unit: "1杯",
          picture:
            "http://p0.meituan.net/wmproduct/0967f805e4dd856fff127529d4f00ca664321.jpg",
          month_saled: 7,
          month_saled_content: "月售7",
          tag: "366457032",
          promotion_info: "",
          status: 0,
        },
        {
          id: 7736503597,
          name: "热销🎈 | 大虾炒鸡（含香米饭&配菜）🌟🌟",
          min_price: 27.8,
          unit: "1人份",
          picture:
            "http://p1.meituan.net/wmproduct/1db229fc2dd962dd6e8ffdb7d5a16c7e267686.jpg",
          month_saled: 27,
          month_saled_content: "月售27",
          tag: "400968577",
          promotion_info: "5.35折",
          status: 0,
        },
        {
          id: 7736503598,
          name: "特色🕶 | 大虾排骨（含香米饭&配菜）💛💛",
          min_price: 29.8,
          unit: "1人份",
          picture:
            "http://p0.meituan.net/wmproduct/a8116d55ac261b6aa4daad0f01433f87281826.jpg",
          month_saled: 19,
          month_saled_content: "月售19",
          tag: "400968577",
          promotion_info: "5.42折",
          status: 0,
        },
        {
          id: 7431068780,
          name: "辣椒炒肉拌面",
          min_price: 22,
          unit: "约1000克",
          picture:
            "http://p0.meituan.net/xianfu/776185d6ce4f5f83b81b926bb01f2a01390991.jpg",
          month_saled: 14,
          month_saled_content: "月售14",
          tag: "298084015",
          promotion_info: "",
          status: 0,
        },
        {
          id: 7303253673,
          name: "番茄炒蛋拌面",
          min_price: 19.6,
          unit: "约1000克",
          picture:
            "http://p1.meituan.net/xianfu/915a6e8cf229053818febd2370eb13de399308.jpg",
          month_saled: 9,
          month_saled_content: "月售9",
          tag: "298084015",
          promotion_info: "9.8折",
          status: 0,
        },
        {
          id: 7289353383,
          name: "孜然炒肉拌面",
          min_price: 22.08,
          unit: "约1000克",
          picture:
            "http://p0.meituan.net/xianfu/7610b7934e42b16dcbfc45185fbb7bdd377725.jpg",
          month_saled: 7,
          month_saled_content: "月售7",
          tag: "298084015",
          promotion_info: "9.6折",
          status: 0,
        },
        {
          id: 3533780873,
          name: "韭菜大肉水饺（20个干）",
          min_price: 16.8,
          unit: "约500克",
          picture:
            "http://p0.meituan.net/xianfu/964cc16ea022fa031c9fc36ec2675820115814.jpg",
          month_saled: 50,
          month_saled_content: "月售50",
          tag: "185952360",
          promotion_info: "6.72折",
          status: 0,
        },
        {
          id: 3533699489,
          name: "大葱大肉水饺（20个干）",
          min_price: 16.8,
          unit: "约500克",
          picture:
            "http://p0.meituan.net/xianfu/acd157e3c3cf6290082823a26a544d8b107294.jpg",
          month_saled: 48,
          month_saled_content: "月售48",
          tag: "185952360",
          promotion_info: "6.72折",
          status: 0,
        },
      ],
    };
  },
};
</script>

<style scoped>
.List-box {
  width: 352px;
  height: 430px;
  background-color: #f5f5f5;
  border-radius: 10px;
  position: absolute;
  top: 195px;
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
}
.box {
  background-color: #fefefe;
  display: flex;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.img-box {
  width: 110px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 10px;
  background-color: aquamarine;

}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.right {
  flex: 1;
}
.name{
  font-weight: 700;
}
.left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 80px;
  height: 61px;
}
.passage {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
p{
  color: rgb(255, 30, 0);
  font-size: 14px;
}
.price{
  color: rgb(255, 30, 0);
  font-weight: 700;
  font-size: 20px;
}
del{
  font-size: 12px;
  color: gray;
}
.qiang{
  background-color: #eb5128;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: white;
  font-size: 14px;
  margin-top: 8px;
  width: 75px;
  border-radius: 30px;
  margin-bottom: 5px;
}


</style>